<template>
  <div class="app-container">
    <el-card>
      <el-table v-loading="loading" :data="superTeamSupplier" @row-dblclick="getTeamType" border>
        <el-table-column label="供应商ID" align="center" prop="supplierId" />
<!--        <el-table-column label="供应商名称" align="center" prop="supplierName" />-->
        <el-table-column label="店铺名称" align="center" prop="shopsName" />
        <el-table-column label="企业logo" width="200" align="center" prop="supplierPic" >
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.supplierPic">
            </el-image>
          </template>
        </el-table-column>
<!--        <el-table-column label="供应商类型" align="center" prop="supplierType">-->
<!--          <template slot-scope="scope">-->
<!--            <el-tag>{{scope.row.supplierType == 1 ? '自营' : '平台'}}</el-tag>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column label="店铺类型" align="center" prop="supplierTypeform">
          <template slot-scope="scope">
            <el-tag>{{scope.row.supplierTypeform == 1 ? '店铺' : '施工队'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="联系人" align="center" prop="linkMan" />
        <el-table-column label="联系电话" align="center" prop="phoneNumber" />
<!--        <el-table-column label="供应商开户银行名称" align="center" prop="bankName" :show-overflow-tooltip="true" />-->
<!--        <el-table-column label="银行账号" align="center" prop="bankAccount" :show-overflow-tooltip="true"/>-->
        <el-table-column label="供应商地址" align="center" prop="address" :show-overflow-tooltip="true" />
        <el-table-column label="状态" align="center" width="150px">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.supplierStatus"
                       active-value="0"
                       inactive-value="1"
                       @change="handleStatusChange(scope.row)"
                       active-text="启用"
                       inactive-text="禁用"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="营业执照" width="200" align="center" prop="licenseUrl" >
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.licenseUrl"
              @click="getBigLicenseUrl(scope.row)"
              :preview-src-list="dialogLicenseUrlList">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="资质证书" width="200" align="center" prop="certificate" >
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.certificate"
              @click="getBigCertificateUrl(scope.row)"
              :preview-src-list="dialogCertificateUrlList">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="资质证书简介" width="120" align="center" prop="certificateText" :show-overflow-tooltip="true"/>
        <el-table-column label="业务简介" width="120" align="center" prop="supplierTypeText" :show-overflow-tooltip="true"/>
        <el-table-column label="保证金" width="120" align="center" prop="balanceMoney" :show-overflow-tooltip="true"/>

        <el-table-column label="最后修改时间" align="center" prop="modifiedTime" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.modifiedTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDeletebaozheng(scope.row)"
            >添加/修改保证金</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
    </el-card>
    <el-dialog :title="titlebzj" :visible.sync="openbzj"  width="500px" append-to-body >
      <el-form ref="form" :model="formbzj" label-width="80px">
        <el-form-item label="保证金余额" prop="balanceMoney">
          <el-input v-model="formbzj.balanceMoney" placeholder="请输入保证金余额" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormbzj">确 定</el-button>
        <el-button @click="cancelbzj">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

  import {
    listSuperTeamSupplier,
    changeSuperTeamStatus
  } from "@/api/super/superTeamSupplier";
  import { listInfosi, getInfosi, delInfosi, addInfosi, updateInfosi, typeStatus,findAllList,addAccount } from "@/api/shopping/goods";

  export default {
    name: "index",
    data() {
      return {
        titlebzj: "",
        formbzj:{
          supplierIdNum:'',
        },
        openbzj: false,

        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 分类表格数据
        superTeamSupplier: null,
        // 是否显示弹出层
        open: false,
        // 日期范围
        dateRange: [],
        // 状态数据字典
        statusOptions: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 5
        },
        defaultProps: {
          children: "children",
          label: "label",
        },
        dialogLicenseUrlList:[],
        dialogCertificateUrlList:[],
      };
    },
    created() {
      this.getList();
    },
    methods: {

      handleDeletebaozheng(row){
        this.openbzj = true;
        this.titlebzj = "保证金"
        this.formbzj.supplierIdNum = row.supplierId;
        console.log("this.formbzj.supplierIdNum***********"+this.formbzj.supplierIdNum)
      },
      cancelbzj(){
        this.openbzj = false;
      },
      submitFormbzj(){
        // this.$refs["formbzj"].validate(valid=>{
        //   if (valid){
        addAccount(this.formbzj).then(response => {
          if (response.code === 200) {
            this.msgSuccess("操作成功");
            this.openbzj = false;
            this.getList();
          }
        });
        // }
        // })
      },

      /* 查询类别列表 **/
      getList(){
        this.loading = true;
        listSuperTeamSupplier(this.queryParams).then(response => {
          this.superTeamSupplier = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      handleStatusChange(row){
        console.log(row)
        let text = row.supplierStatus === "0" ? "启用" : "停用";
        this.$confirm(
          '确认要' + text + '"' + row.shopsName + '"吗?',
          "警告",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(function () {
            return changeSuperTeamStatus(row.supplierId, row.supplierStatus,row.customerId);
          })
          .then(() => {
            this.msgSuccess(text + "成功");
          })
          .catch(function () {
            row.supplierStatus = row.supplierStatus === "0" ? "1" : "0";
          });
      },
      getTeamType(row){
        this.$router.push({path:"/superTeamSupplier/superTeam",query:{supplierId:row.supplierId}});
      },
      // 查看营业执照大图
      getBigLicenseUrl(row){
        this.dialogLicenseUrlList.push(row.licenseUrl);
      },
      // 查看资质证书大图
      getBigCertificateUrl(row){
        this.dialogCertificateUrlList.push(row.certificateUrl);
  }
    }
  }
</script>

<style scoped>

</style>
